<template>
	<view class="boxConner">
		<!-- 商品图片 -->
		<view>
			<image style="width: 100%" :src="goodsDeatil.goods_big_img"></image>
		</view>
		<!-- 参考价格和分享 -->
		<view class="writeBox" :class="{ fixed: isFixed }">
			<view class="priceBox">
				<view class="reds">参考价：￥<text class="price">{{
            goodsDeatil.price * 1 == 0
              ? "价格面议"
              : goodsDeatil.price * 1 + specPrice * 1
          }}</text>
				</view>
				<view class="share-box">
					<button class="share-btn" open-type="share">
						<uni-icons type="redo" size="20"></uni-icons>
						<text>分享</text>
					</button>
				</view>
			</view>
			<view class="box"> {{ specGroup }}{{ specFileName }} </view>
			<view class="box">
				<text class="category"> {{ goodsName }}</text>
			</view>
		</view>
		<view v-if="isFixed" :style="{ height: '120px' }"></view>
		<!-- 附件 -->
		<view class="fuJian">
			<uni-collapse ref="collapse" v-model="openFlag">
				<uni-collapse-item :title="titles">
					<template #title>
						<view style="
                display: flex;
                justify-content: space-between;
                height: 80rpx;
                align-items: center;
                padding: 0 20rpx;
              ">
							<view>{{ titles }}</view>
							<view @click.prevent="showAttrFn"
								style="background-color: red; color: #fff; padding: 10rpx">
								选择附件</view>
						</view>
					</template>
					<view class="content">
						<view style="display: flex; justify-content: space-between">
							<view>{{ goodsName }}</view>
							<view>￥{{ goodsYSPrice * 1 == 0 ? "价格面议" : goodsYSPrice }}</view>
						</view>

						<view v-for="item in fJArr" style="display: flex; justify-content: space-between">
							<view>{{ item.name }}</view>
							<view>￥{{ item.price }}</view>
						</view>
						<!-- 循环附件 -->
						<view v-for="item in fileSpecList" style="display: flex; justify-content: space-between">
							<view><text v-if="item.level==4">{{item.parent.type_name}}/</text>{{ item.type_name }}
							</view>
							<view>￥{{ item.price }}</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="spec">
			<view v-for="item in specArr">

				<template
					v-if="item.children.length==1 && item.children[0].value_name=='' && item.children[0].attr_name==''">

				</template>
				<template v-else>
					<view class="group_name">{{ item.group_name }}</view>
					<view class="attrBox">
						<template v-for="son in item.children">
							<view @click="checkSpecFn(item, son)" :class="son.checked == 1 ? 'checkeds' : ''"
								class="specItem" v-if="son.value_name || son.attr_name">{{ son.value_name }}
								<text v-if="son.attr_name && son.value_name">
									<template v-if="son.attr_name != son.value_name">
										【{{ son.attr_name }}】
									</template>
								</text>
								<text v-else>{{ son.attr_name }}</text>
							</view>
						</template>
					</view>
				</template>
			</view>
		</view>
	</view>
	<view class="bottomBox">
		<view class="bottomSon">
			<view class="sonBS">
				<button open-type="contact" class="btnContact">
					<view><uni-icons type="chatboxes" size="30"></uni-icons></view>
					<view>客服</view>
				</button>
			</view>
			<view class="sonBS">
				<button class="btnContact" @click="toPath('/pages/index/index')">
					<view><uni-icons type="home" size="30"></uni-icons></view>
					<view>首页</view>
				</button>
			</view>
			<view class="sonBS">
				<button class="btnContact" @click="toPath('/pages/qingDan/index')">
					<view><uni-icons type="cart" size="30"></uni-icons></view>
					<view>清单</view>
				</button>
			</view>
			<view class="sonBtn" @click="buttonClick">加入清单</view>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" background-color="#fff">
		<view class="popup-content">
			<view>{{ goodsName }}</view>
			<view style="margin: 10rpx 0">{{ specGroup }}{{ specFileName }}</view>
			<view style="display: flex; justify-content: space-between; margin: 10rpx 0">
				<view style="display: flex; align-items: center">购买数量</view>
				<view><uni-number-box v-model="cartNum"></uni-number-box></view>
			</view>
			<!-- <view style="display: flex; justify-content: center">
				<view class="btns" @click="submit">加入清单</view>
			</view> -->
			<button class="btns" @click="submit">加入清单</button>
		</view>
	</uni-popup>

	<uni-popup ref="popAttr" type="bottom" background-color="#fff">
		<view class="popup-content1">
			<fileSpec v-if="goodsID" :id="goodsID" @confirm="fileSpecConfirm"></fileSpec>
			<!-- <view style="display: flex; justify-content: center">
				<view class="btns" @click="submit">加入清单</view>
			</view> -->
		</view>
	</uni-popup>
	<!-- goodsID -->
</template>
<script setup>
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onPageScroll,
	} from "@dcloudio/uni-app";
	import fileSpec from "./components/fileSpec.vue";
	import {
		ref,
		reactive,
		computed,
		watch
	} from "vue";
	import {
		getUser
	} from "@/utils/token.js";
	import {
		getGoodsDetail,
		getSpecValue,
		addCarts,
		goodsAttachmentList,
	} from "@/api/index.js";
	const collapse = ref(null);
	const popup = ref(null);
	const isIndep = ref(0);
	const fileSpecList = ref([]);
	const specFileName = ref("");
	const specPrice = ref(0);

	function fileSpecConfirm(datas) {
		isIndep.value = datas.type;
		fileSpecList.value = datas.data;
		specPrice.value = 0;
		for (let i = 0; i < datas.data.length; i++) {
			specPrice.value += datas.data[i].price * 1;
		}
		//   保留两位小数
		console.log(specPrice.value, 185);
		specPrice.value = Math.floor(specPrice.value * 100) / 100;
		//   获取名字
		let nameArr = datas.data.map((item) => {
			if (item.level == 4) {
				return item.parent.type_name + '/' + item.type_name
			} else {
				return item.type_name
			}
		});
		specFileName.value = ""
		if (nameArr.length > 0) {
			specFileName.value = "+" + nameArr.join("+");
		}
		popAttr.value.close();
	}

	function buttonClick() {
		requestSpecFlag.value++;
		if (getUser()) {

			popup.value.open();
		} else {
			uni.navigateTo({
				url: "/wuLian/pages/login",
			});
		}
	}
	const cartNum = ref(1);

	function submit() {
		const user = getUser();
		let submitOption = {};
		submitOption.customer_id = user.id;
		submitOption.goods_id = goodsID.value;
		submitOption.num = cartNum.value;
		submitOption.spec_ids = value_id_str.value;
		submitOption.goods_desc = specGroup.value + specFileName.value;
		submitOption.is_indep = isIndep.value;
		const arr = fileSpecList.value.map((item) => item.type_id);
		submitOption.attach_ids = arr.join(",");
		uni.showLoading({
			title: "加载中...",
		});
		addCarts(submitOption).then((e) => {
			// console.log(e)
			// 保存成功 跳转到 清单页面
			uni.hideLoading();
			if (e.code == 0) {
				uni.showToast({
					title: "加入清单成功",
					icon: "success",
				});
			} else {
				uni.showToast({
					title: e.msg,
					icon: "none",
				});
			}
			popup.value.close();
			// uni.switchTab({
			//   url: "/pages/qingDan/index",
			// });
		});
	}
	// 接收商品ID
	const goodsID = ref(0);
	// 商品名称
	const goodsName = ref("");
	const num = ref(1);
	const fJArr = ref([]);
	// 部件清单 名字
	const titles = computed(() => {
		let nums = num.value + fileSpecList.value.length;
		console.log(nums)
		return "部件清单(" + nums + "个)";
	});
	// 规格数组
	const specArr = ref([]);
	onLoad((option) => {
		// console.log(11)
		goodsID.value = option.id;
		getList();
		getGoodsFile();
	});
	const goodsDeatil = ref({});
	const fileSpecArr = ref([]);

	function getGoodsFile() {
		goodsAttachmentList(goodsID.value).then((e) => {
			fileSpecArr.value = e.data;
			// console.log(fileSpecArr.value,193)
		});
	}

	function getList() {
		getGoodsDetail(goodsID.value).then((e) => {
			// console.log(e, 19)
			goodsDeatil.value = e.data;
			goodsName.value = goodsDeatil.value.goods_name;
			specArr.value = goodsDeatil.value.spec_group;
			requestSpecFlag.value++;
		});
	}
	const goodsYSPrice = ref(0);
	const specGroup = computed(() => {
		// 临时数组
		let temp = goodsDeatil.value.specification_desc ? [...goodsDeatil.value.specification_desc] : [];
		console.log(temp, 286)
		temp[temp.indexOf("系列编号")] = goodsDeatil.value.combination_name;
		for (let i = 0; i < specArr.value.length; i++) {
			for (let j = 0; j < specArr.value[i].children.length; j++) {
				if (specArr.value[i].children[j].checked == 1) {
					// console.log(specArr.value[i].children[j],specArr.value[i].group_name,specArr.value[i].children[j].value_name, 95)
					// console.log(temp,199)
					// console.log(temp.indexOf(specArr.value[i].group_name),200)
					console.log(specArr.value[i].group_name, 290)
					if (specArr.value[i].children.length > 1) {
						if(specArr.value[i].children[j].value_name){
							temp[temp.indexOf(specArr.value[i].group_name)] = specArr.value[i].children[j].value_name;
						}else{
							console.log(300,temp.indexOf(specArr.value[i].group_name))
							temp[temp.indexOf(specArr.value[i].group_name)-1] = ""
							temp[temp.indexOf(specArr.value[i].group_name)] = ""
							
							console.log(temp,303)
						}
						
					} else {
						if (specArr.value[i].children[j].value_name != "" && specArr.value[i].children[j].attr_name != "") {
							temp[temp.indexOf(specArr.value[i].group_name)] = specArr.value[i].children[j].value_name
						} else {
							temp[temp.indexOf(specArr.value[i].group_name)] = ""
						}

					}
					console.log(temp[temp.indexOf(specArr.value[i].group_name)], 298)
				}
			}
		}
		// console.log(temp.join(""), 47)
		return temp.join("");
	});
	const openFlag = ref(false);
	// 规格选中
	function checkSpecFn(item, son) {
		// console.log(item, son, 100)
		fJArr.value = [];
		for (let i = 0; i < specArr.value.length; i++) {
			for (let j = 0; j < specArr.value[i].children.length; j++) {
				if (item.group_id === specArr.value[i].group_id) {
					if (specArr.value[i].children[j].value_id == son.value_id) {
						specArr.value[i].children[j].checked = 1;
					} else {
						specArr.value[i].children[j].checked = 0;
					}
				}
				if (specArr.value[i].type == 1) {
					if (
						specArr.value[i].children[j].checked == 1 &&
						specArr.value[i].children[j].price * 1 != 0
					) {
						fJArr.value.push({
							name: specArr.value[i].children[j].value_name == specArr.value[i].children[j]
								.attr_name ? specArr.value[i].children[j].value_name : specArr.value[i].children[j]
								.value_name +
								`${
                specArr.value[i].children[j].attr_name
                  ? "【" + specArr.value[i].children[j].attr_name + "】"
                  : ""
              }`,
							price: specArr.value[i].children[j].price,
						});
					}
				}
			}
		}

		num.value = fJArr.value.length + 1;
		openFlag.value = false;
		requestSpecFlag.value++;
	}
	const requestSpecFlag = ref(0);
	const value_id_str = ref("");
	watch(
		() => requestSpecFlag.value,
		() => {
			// console.log("改了")
			// 获取选中的id
			const temp = [];
			for (let i = 0; i < specArr.value.length; i++) {
				for (let j = 0; j < specArr.value[i].children.length; j++) {
					if (specArr.value[i].children[j].checked == 1) {
						temp.push(specArr.value[i].children[j].value_id);
					}
				}
			}
			// 调接口
			value_id_str.value = temp.join(",");
			getSpecValue({
				goods_id: goodsDeatil.value.id,
				value_id: temp.join(","),
			}).then((res) => {
				specArr.value = res.data.spec_group;
				goodsDeatil.value.price = res.data.total_price;
				goodsYSPrice.value = res.data.price;
			});
		}
	);

	function fJArrChange() {}

	function toPath(url) {
		uni.switchTab({
			url: url,
		});
	}

	// 分享给朋友
	onShareAppMessage(() => {
		return {
			title: goodsName.value,
			path: `/chanPin/pages/chanPinXiangQing?id=${goodsID.value}`,
			imageUrl: goodsDeatil.value.goods_big_img,
		};
	});

	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: goodsName.value,
			query: `id=${goodsID.value}`,
			imageUrl: goodsDeatil.value.goods_big_img,
		};
	});

	const isFixed = ref(false);

	// 监听页面滚动
	onPageScroll((e) => {
		// 获取商品图片的高度，这里假设图片高度为375rpx，根据实际情况调整
		const imageHeight = 240;
		if (e.scrollTop >= imageHeight) {
			isFixed.value = true;
		} else {
			isFixed.value = false;
		}
	});
	const popAttr = ref(null);

	function showAttrFn() {
		console.log(337);
		popAttr.value.open();
	}
</script>
<style scoped>
	.reds {
		color: red;
		font-size: 26rpx;
	}

	.price {
		font-size: 34rpx;
	}

	.btnContact {
		padding: 0;
		background: none;
		border: none;
		line-height: 1;
		width: 100rpx;
		font-size: 24rpx;
	}

	.btnContact::after {
		display: none;
	}

	.priceBox {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.box {
		padding: 0 20rpx;
	}

	.category {
		background-color: red;
		color: #fff;
		font-size: 24rpx;
		padding: 5rpx 20rpx 5rpx 10rpx;
		border-radius: 0 20rpx 20rpx 0;
	}

	.boxConner {
		background-color: #f8f8f8;
		font-size: 24rpx;
		padding-bottom: 160rpx;
	}

	.writeBox {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 20rpx 0;
	}

	.writeBox.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.fuJian {
		margin-top: 30rpx;
		background-color: #fff;
	}

	.content {
		padding: 10rpx 30rpx;
	}

	.spec {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 20rpx 30rpx;
	}

	.specItem {
		border: 2rpx solid #ccc;
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
	}

	.attrBox {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.checkeds {
		background-color: red;
		border: 2rpx solid red;
		color: #fff;
	}

	.group_name {
		padding: 10rpx 0;
		font-weight: 600;
	}

	.bottomBox {
		height: 100rpx;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
	}

	/* 判断 iOS 设备 */
	@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
		.bottomBox {
			height: 160rpx;
			/* 你的样式 */
		}
	}

	.bottomSon {
		display: flex;
		gap: 10rpx;
		height: 100rpx;
	}

	.sonBS {
		width: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.sonBtn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e60012;
		color: #fff;
	}

	.popup-content {
		padding: 20rpx;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 30rpx;
		background-color: #fff;
		font-size: 24rpx;
	}

	.popup-content1 {
		padding: 20rpx;
		height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 30rpx;
		background-color: #fff;
		font-size: 24rpx;
	}

	.btns {
		background-color: #e60012;
		color: #fff;
		width: 100%;
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.share-box {
		display: flex;
		align-items: center;
	}

	.share-btn {
		display: flex;
		align-items: center;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		font-size: 24rpx;
	}

	.share-btn::after {
		display: none;
	}
</style>